<template>
	<view>
		<!-- 页首 -->
		<!-- <zw-header></zw-header> -->
		<menu-wrapper active-index="2-1" style="background-color: #fff;padding: 0;">
			<view class="card-body">
				<view>
					<image src="/static/image/publish/keft.png" class="image" @click="prev"></image>
				</view>
				<view class="container">
					<view style="width: 70%;">
						<view style="display: flex;justify-content: center;align-items: center;">
							<image :src="imageList1[index]" style="border-radius: 14px;height: 1000rpx;"
								mode="heightFix">
							</image>
						</view>
						<view style="display: flex;justify-content: center;align-items: center;">
							<view
								style="display: flex;flex-wrap: nowrap;margin-bottom: 100rpx;align-items: flex-start;">
								<view v-for="(item,key) in imageList1" style="margin-top: 34rpx;cursor: pointer;"
									:key="key" @click="clickOption(key)">
									<image :style="key==index?'border: 6rpx solid #D000FF;':''" :src="item"
										style="width: 140rpx;border-radius: 28rpx;height: 140rpx;margin: 12rpx;">
									</image>
								</view>
							</view>
						</view>
					</view>
					<view style="width: 30%;height: 90%;">
						<view style="background: #000000;border-radius: 26rpx;height: 100%;width: 95%;">
							<view
								style="color: #B2B4BB;font-size: 25px;font-weight: 500;text-align: left;padding: 60rpx 50rpx 40rpx 50rpx;">
								发布作品</view>
							<view style="padding: 0rpx 50rpx 0rpx 50rpx;">
								<fui-input :marginTop="24" backgroundColor="#3E3E3E" color="#6D6D6D"
									laceholderStyle="color: #6D6D6D;font-size: 14px;" :radius="20"
									border-color="#3E3E3E" inputBorder placeholder="请输入作品名称" v-model="name"></fui-input>
							</view>
							<view style="padding: 40rpx 50rpx 0rpx 50rpx;">
								<fui-textarea :radius="20" textareaBorder
									placeholderStyle="color: #6D6D6D;font-size: 14px;" border-color="#3E3E3E"
									background-color="#3E3E3E" v-model="content" color="#6D6D6D"
									placeholder="分享创作想法与作品简介，更能在广场中被推荐、展示、搜索哦..."></fui-textarea>
							</view>
							<view style="padding: 40rpx 50rpx 0rpx 50rpx;">
								<view class="addimg" @click="showImg=true">

									<view style="display: flex;justify-content: center;align-items: center;">
										<image src="/static/image/publish/img.png" style="width: 45rpx;"
											mode="widthFix"></image>
									</view>
									<view style="color: #979797;font-size: 36rpx;font-weight: 500;margin-left: 20rpx;">
										添加多图</view>
								</view>
							</view>
							<view style="padding: 40rpx 50rpx 0rpx 50rpx;">
								<view class="bg-item">
									<view style="font-size: 14px;font-weight: 500;color: #B2B4BB;text-align: left;">
										请选择分类
									</view>
									<view class="select-bg">
										<view class="item" @click="show=true;">
											<view
												style="color: #6D6D6D;font-size: 28rpx;text-align: right;padding-left: 20rpx;">
												请选择分类
											</view>
											<fui-icon name="arrowdown" color="#B2B4BB" size="48"
												style="margin-right: 20rpx;"></fui-icon>
										</view>
									</view>
								</view>
							</view>
							<view style="padding: 40rpx 50rpx 0rpx 50rpx;">
								<view class="bg-item">
									<view class="select-bg" style="width: 100%;">
										<view class="item" @click="show=true;">
											<view
												style="color: #6D6D6D;font-size: 28rpx;text-align: right;padding-left: 20rpx;">
												请选择当前分类关键词
											</view>
											<fui-icon name="arrowdown" color="#B2B4BB" size="48"
												style="margin-right: 20rpx;"></fui-icon>
										</view>
									</view>
								</view>
							</view>

							<view style="padding: 40rpx 50rpx 0rpx 50rpx;">
								<view class="bg-item">
									<view style="font-size: 14px;font-weight: 500;color: #B2B4BB;text-align: left;">
										创作信息公开范围
									</view>
									<view class="select-bg">
										<view class="item" @click="show=true;">
											<view
												style="color: #6D6D6D;font-size: 28rpx;text-align: right;padding-left: 20rpx;">
												所有人可见
											</view>
											<fui-icon name="arrowdown" color="#B2B4BB" size="48"
												style="margin-right: 20rpx;"></fui-icon>
										</view>
									</view>
								</view>
							</view>
							<view style="padding: 40rpx 50rpx 0rpx 50rpx;">
								<view class="bg-item">
									<view style="font-size: 14px;font-weight: 500;color: #B2B4BB;text-align: left;">
										禁止下载原图
									</view>
									<view
										style="margin-left: 20rpx;width: 65%;display: flex;justify-content: flex-end;">
										<fui-switch scaleRatio="0.7" @change="changeOriginFun"
											:checked="originFun"></fui-switch>
									</view>
								</view>
							</view>

							<view style="padding: 40rpx 50rpx 0rpx 50rpx;">
								<view class="bg-item"
									style="justify-content: space-between;font-size: 14px;font-weight: 500;">
									<view class="bottom-button" @click="close">
										<view>取消</view>
									</view>
									<view class="bottom-button" @click="submit"
										style="color: #fff;background: #0033FF;">
										<view>立即发布</view>
									</view>
								</view>
							</view>

						</view>
					</view>
				</view>
				<view
					style="position: relative;height: 1600rpx;display: flex;justify-content: center;align-items: center;">
					<view>
						<image src="/static/image/publish/close.png" class="image"
							style="position: absolute;top: 0;right: 0;" @click="close"></image>
						<image src="/static/image/publish/rigth.png" class="image" @click="next"></image>
					</view>
				</view>
			</view>
		</menu-wrapper>
		<fui-landscape :show="showImg" :closable="closable" @close="closePopup">
			<view class="fui-ani__box"
				style="background-color: #fff;border-radius: 28rpx;width: 1400rpx;;">
				<view class="flex-center"
					style="height:120rpx;display: flex;justify-content: space-between;align-items: center;padding: 0 40rpx 0 40rpx;">
					<view style="color: #000000;font-weight: bold;font-size: 48rpx;">添加作品图</view>
					<image src="/static/image/user/content/close.png" style="width:80rpx;" mode="widthFix"
						@click="closePopup">
					</image>
				</view>
				<view style="margin:80rpx;width: 90%;padding-top: 0;">
					<view
						style="display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #D8D8D8;">
						<scroll-view scroll-y @scrolltolower="getList">
							<view style="display: flex;flex-wrap: wrap;margin-bottom: 90rpx;align-items: flex-start;">
								<fui-checkbox-group name="checkbox" v-model="vals" @change="change"
									style="width: 100%;display: flex;flex-wrap: wrap;cursor: pointer;">
									<view v-for="(item,index) in list" v-if="!imageList1.includes(item.path)"
										style="position: relative;margin-top: 34rpx;width: 25%;">
										<view style="position: absolute;right: 15%;top: 20rpx;z-index: 1;">
											<fui-checkbox :value="item.path"></fui-checkbox>
										</view>
										<image :src="item.path" style="width: 90%;border-radius: 28rpx;"
											mode="widthFix">
										</image>
									</view>
								</fui-checkbox-group>
							</view>
						</scroll-view>
					</view>
					<view style="display: flex;justify-content: center;align-items: center;margin-top: 50rpx;">
						<view @click="addImg" style="font-size: 18px;font-weight: bold;color: #FFFFFF;background: #0033FF;border-radius: 100px;height: 100rpx;width: 100%;display: flex;justify-content: center;align-items: center;cursor: pointer;">
							<view>确认添加</view>
						</view>
					</view>
				</view>
			</view>
		</fui-landscape>
	</view>
</template>

<script>
	import menuWrapper from '@/components/user/common/menu-wrapper.vue';
	import centerConfig from '@/common/config/user/center.config.js';

	import {
		mapState
	} from 'vuex';

	export default {
		components: {
			menuWrapper
		},
		data() {
			return {
				showImg: false,
				closable: false,
				...centerConfig,
				accountInfo: {},
				counts: [],
				tabIndex: 1,
				list: [],
				page: 0,
				nameKey: '',
				vals: [],
				imgList: [],
				index: 0,
				show: false,
				categoryList: [],
				indexGroup: 0,
				showDialog1: false,
				categoryList: [],
				category: null,
				type: 0,
				id: 0,
				x: "x",
				originFun: false,
				imageList: [

				],
				imageList1: [

				],
				visList: ["", "所有人可见", "仅关注可见", "仅一键同款可见", "仅一键同款+3积分可见", "仅一键同款+5积分可见"],
				sizeTab1Index: 1,
				sizeTab2Index: 1,
				styleIndex: 1,
				moduleIndex: 1,
				name: "",
				status: 1,
				label: "",
				visible: 1,
				goodContent: "",
				visLabel: "所有人可见",
				content: "",
				createTime: "",
				author: "",
				module: "",
				size: "",
				style: "",
				returnData: null,
				plateUserId: "",
				showDialog: false,
				selectImage: ""
			}
		},
		computed: {
			...mapState(['loginUser']),
			currentTime() {
				const currentHour = new Date().getHours();
				const timeQuantums = ['凌晨', '上午', '下午', '晚上'];
				return timeQuantums[Math.floor(currentHour / 6)];
			}
		},
		onLoad(op) {
			this.imageList1 = uni.getStorageSync('picture')
			console.log('imgList', this.imgList)
			this.tabIndex = op.tabIndex;
			this.getList();
			this.getCategory();
			this.$store.commit('tab', 0);
		},
		onReachBottom() {
			console.log('下拉加载')
		},
		methods: {
			addImg(){
				for (var i = 0; i < this.vals.length; i++) {
					this.imageList1.push(this.vals[i])
				}
				this.showImg=false;
				
			},
			closePopup() {
				this.showImg = false
			},
			changeOriginFun(e) {
				this.originFun = e.detail.value;
				if (this.originFun) {
					this.status = 2;
				} else {
					this.status = 1;
				}
				console.log(e.detail)
			},
			submit() {
				if (this.category) {
					this.label = this.category.id
				}
				const that = this;
				this.$util.request('/api/v1/pictureCollection', {
					name: this.name,
					content: this.content,
					status: that.status,
					label: this.label,
					formatImages: this.imageList1,
					type: 1,
					visible: this.visible,
					jobId: this.id,
				}, (res) => {
					uni.showToast({
						title: "发表成功",
						icon: 'none'
					})
					uni.navigateTo({
						url: "/pages/index"
					})
					console.log('返回正确回调', res)
				}, false);


			},
			getCategory() {
				const that = this;
				this.$util.request('/api/v1/category/all', {
					page: 0,
					size: 100
				}, (res) => {
					console.log('返回正确回调', res)
					uni.setStorageSync("category", res.data)
					var category = uni.getStorageSync("category");
					that.categoryList.push(...category)
				}, true);
			},
			change(e) {
				this.show = false
				console.log(e)
			},
			cancel() {
				this.show = false
			},
			prev() {
				if (this.index > 0) {
					this.index--
				}
			},
			next() {
				if (this.index < (this.imageList1.length - 1)) {
					this.index++
				}
			},
			close() {
				uni.navigateBack()
			},
			change(e) {
				console.log(e)
			},
			goUrl(url) {
				uni.navigateTo({
					url: url,
					fail(err) {
						console.log(err)
					}
				})
			},
			clickOption(index) {
				this.index = index
			},
			getList() {
				let that = this;
				var cmd = '';
				if (this.nameKey) {
					cmd = this.nameKey
				}
				this.$util.request('/api/v1/myphoto/mine', {
					page: that.page,
					cmd: cmd
				}, (res) => {
					console.log('myphoto', res)
					if (res.data.length > 0) {
						that.page = that.page + 1;
					}
					that.list = that.list.concat(res.data)
				}, true);
			},
		}
	}
</script>

<style lang="scss">
	.bottom-button {
		color: #000000;
		background: #D8D8D8;
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0 20rpx 0;
		width: 90%;
		margin: 20rpx;
		cursor: pointer;
	}

	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		cursor: pointer;
		height: 70rpx;
	}

	.bg-item {
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.select-bg {
		background-color: #3E3E3E;
		border-radius: 16rpx;
		color: #979797;
		font-size: 36rpx;
		font-weight: 500;
		width: 65%;

	}

	.addimg {
		background-color: #3E3E3E;
		border-radius: 24rpx;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}

	.image {
		width: 100rpx;
		height: 100rpx;
	}

	.container {
		width: 70%;
		background: linear-gradient(122deg, #310BE8 0%, #0027FE 34%, #8200FF 65%, #D703FF 99%);
		border-radius: 40rpx;
		height: 1600rpx;
		margin: 0 40rpx 0 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.card-body {
		margin-top: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.lable {
		font-family: Source Han Sans;
		font-size: 80rpx;
		font-weight: bold;
		font-feature-settings: "kern" on;
		color: #3D3D3D;

	}

	.publish {
		background: #A5A5A5;
		border-radius: 50px;
		color: #FFFFFF;
		font-size: 14px;
		padding: 10rpx 20rpx 10rpx 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>